<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-Type" content="text/html" charset="utf-8">
<title>背景半透明覆盖整个可视区域</title>
    <script type="text/javascript">

        LAMJS.run(function() {
            'use strict';
            var System = this;
            System.use();
            System.Loader.
                    load({
                        'baseUrl':System.ROOT,
                        'suffix':'.css',
                        'rel':'stylesheet',
                        'css':[
                            '/css/lhh_lib.css'
                        ]
                    })
                    .print();

            System.import([
                '/Sport.class',
                '/Slider.class'
            ],System.classPath);


        });

    </script>



</head>
<body>
<style type="text/css">
    *{margin:0;padding:0;}
    html,body{height:100%;}
    .Area{ height: 100%;position: relative;overflow: hidden;margin:0 auto;}
    .pre,.next{position:absolute;top:50%;z-index: 100;cursor: pointer;}
    .pre{left:30px;}
    .next{right:30px;}
    .imgs{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
    .imgs .img{display: block;float: left;margin:0;}
    .imgs .img .border{ margin-right:5px;border:5px solid red;padding:10px;}
    .imgs .img .border.last{margin:0;}
    .imgs img{width:100%; }
</style>
<div class="Area">
    <i class="pre">上一个</i>
    <i class="next">下一个</i>
    <ul class="imgs clearfix">
        <li class="img">
            <div class="border">
                <img src="http://img0.bdstatic.com/img/image/shouye/mingxing0923.jpg" />
            </div>

        </li>
        <li class="img">
            <div class="border">
                <img src="http://img0.bdstatic.com/img/image/shouye/chongwu0923.jpg" />
            </div>
        </li>
        <li class="img">
            <div class="border"><img src="http://img0.bdstatic.com/img/image/shouye/dongman0923.jpg" /></div>

        </li>
        <li class="img">
            <div class="border"><img src="http://img0.bdstatic.com/img/image/shouye/touxiang0923.jpg" /></div>

        </li>
        <li class="img">
            <div class="border"><img src="http://img0.bdstatic.com/img/image/shouye/xiaoqingxin0923.jpg" /></div>

        </li>
        <li class="img">
            <div class="border last"><img src="http://img0.bdstatic.com/img/image/shouye/dongman0923.jpg" /></div>

        </li>


    </ul>
</div>
<#include file="{{LAM.VIEWS}}/test.html" dataType="html" />

<br>
<br>
<br>
<br>
<br>
<br>
</body>


<script type="text/javascript">


    LAMJS.run(function(){
        'use strict';
        var System=this;
        var slider;


//            jQuery.getScript(html, function(i){
//                eval(i)
//                console.log(System.Html)
//            });
        function slider_f(){
            slider=new System.Slider({
                '$pre':$('.pre'),
                '$next':$('.next'),
                '$autoHandler':$('.Area'),
                '$ul':$('ul.imgs'),
                '$li':$('.img'),
                '$view':$('.Area'),
                'count':$('.img').length,
                'unit':'px',
                'moveNumber':1,
                'vcount':3,
                'position':'left',
                'autoMove':function(that,$autoHandler){
                    $autoHandler = $autoHandler || that.$autoHandler;
                    $autoHandler.hover(function(){
                        that.stop();
                    },function(){
                        that.begin();
                    });
                },

                'callback_event':function(){
                    var __this__ =this;

                    if(this.event) {
                        this['$next']['on']('click', function () {

                            __this__.next();
                        });

                        this['$pre']['on']('click', function () {
                            __this__.pre();


                        });

                    }


                }
            });
            slider.setSport(true);
            slider.run();
        }



        slider_f();
        $(window).resize(function(){
            slider.resize();

        });





    });
</script>
</html> 